<template>
	<view class="pet-forum-container">
		<!-- 页脚之前添加悬浮发布按钮 -->
		<view class="floating-publish-btn" @click="goPost">
			<text class="plus-icon">+</text>
			<text class="publish-text">发布</text>
		</view>

		<!-- 顶部导航栏 -->
		<view class="top-navbar">
			<view class="container-fluid">
				<view class="row align-items-center">
					<view class="col-lg-3 col-md-3 col-sm-12">
						<view class="logo">
							<image src="/static/petLogo.png" mode="aspectFit"></image>
							<text class="titleText">宠物健康管家</text>
						</view>
					</view>
					<view class="col-lg-6 col-md-6 col-sm-12">
						<view class="navbar-center">
							<!-- 分类导航移到这里 -->
							<view class="nav-categories">
								<view class="nav-item" @click="goIndex">
									<text class="titleText">首页</text>
								</view>
								<view class="nav-item" @click="goShop">
									<text class="titleText">商城</text>
								</view>
								<view class="nav-item" @click="goHealth">
									<text class="titleText">健康</text>
								</view>
							</view>
							<!-- 搜索栏缩短 -->
							<view class="search-container">
								<image src="/static/index/search-icon.png" mode="aspectFill"></image>
								<input type="text" placeholder="搜索宠物食品" class="search-input" />
								<button class="search-btn">搜索</button>
							</view>
						</view>
					</view>
					<view class="col-lg-3">
						<view class="user-actions">
							<view class="action-item" @click="goMine">
								<image src="/static/Tabbar/mine.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">我的账户</text>
							</view>
							<view class="action-item">
								<image src="/static/Tabbar/shop.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">购物车</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<div class="web-content-container">
			<!-- 专家专栏 -->
			<view class="expert-column">
				<view class="section-title">
					<text class="title-text">专家专栏</text>
				</view>
				<div class="expert-grid">
					<view v-for="(expert, index) in experts" :key="index" class="expert-card" @click="goExpert(expert)">
						<image :src="expert.avatar" class="expert-avatar"></image>
						<text class="expert-name">{{ expert.name }}</text>
						<text class="expert-title">{{ expert.title }}</text>
					</view>
				</div>
			</view>

			<!-- 用户社区 -->
			<view class="user-community">
				<view class="section-title">
					<text class="title-text">用户分享</text>
				</view>
				<div class="posts-container">
					<view v-for="(post, index) in userPosts" :key="index" class="post-card" @click="goTalk(post)">
						<view class="post-header">
							<image :src='post.avatar' class="user-avatar"></image>
							<text class="username">{{ post.username }}</text>
						</view>
						<text class="post-content">{{ post.content }}</text>
						<div class="post-image-container">
							<image :src="post.picture" class="post-image"></image>
						</div>
						<!-- 	<view class="post-interactions">
							<div class="interaction-item">
								<span class="interaction-icon">👍</span>
								<span class="interaction-count">{{ post.likes }}</span>
							</div>
							<div class="interaction-item" @click="goTalk(post)">
								<span class="interaction-icon">💬</span>
								<span class="interaction-count">{{ post.comments }}</span>
							</div>
						</view> -->
					</view>
				</div>
			</view>
		</div>
		<!-- 页脚 -->
		<view class="footer">
			<view class="container">
				<view class="row">
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">关于我们</text>
							<text class="footer-link">公司简介</text>
							<text class="footer-link">发展历程</text>
							<text class="footer-link">联系方式</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">客户服务</text>
							<text class="footer-link">帮助中心</text>
							<text class="footer-link">售后政策</text>
							<text class="footer-link">投诉建议</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">商务合作</text>
							<text class="footer-link">商家入驻</text>
							<text class="footer-link">品牌合作</text>
							<text class="footer-link">营销中心</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">关注我们</text>
							<view class="social-links">
								<text class="social-icon iconfont icon-weixin"></text>
								<text class="social-icon iconfont icon-weibo"></text>
								<text class="social-icon iconfont icon-douyin"></text>
							</view>
							<text class="footer-contact">客服热线：400-123-4567</text>
						</view>
					</view>
				</view>
				<view class="copyright">
					<text>© 2025 宠物健康管家 All Rights Reserved</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'
	import {
		userApi,
		dynamics
	} from '@/api/user.js'

	export default {
		components: {
			titleBar
		},
		data() {
			return {
				experts: [{
						id: 1,
						name: '洪医生',
						title: '宠物营养学专家',
						avatar: '/static/forum/doctornv.png'
					},
					{
						id: 2,
						name: '金教授',
						title: '宠物行为专家',
						avatar: '/static/forum/doctorna.png'
					},
					{
						id: 3,
						name: '刘教授',
						title: '宠物行为专家',
						avatar: '/static/forum/doctorna.png'
					},
					{
						id: 4,
						name: '竺教授',
						title: '宠物行为专家',
						avatar: '/static/forum/doctorna.png'
					},
					{
						id: 5,
						name: '郑教授',
						title: '宠物行为专家',
						avatar: '/static/forum/doctorna.png'
					}
				],
				userPosts: []
			}
		},
		mounted() {
			this.getPostDetail()
		},
		methods: {
			goPost() {
				uni.redirectTo({
					url: '/pages/forum/postMsg'
				})
			},
			async getPostDetail() {
				try {
					const result = await dynamics.getPost()
					// 开始倒计时
					this.userPosts = result
					console.log('获取成功', result);
				} catch (error) {
					uni.showToast({
						title: '获取信息失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取失败', error);
				}
			},
			goTalk(post) {
				// uni.$emit('articleId', {
				// 	id: post.id
				// })
				// uni.setStorageSync('articleId', post.id)
				getApp().globalData.currentArticleId = post.id;
				getApp().globalData.currentArticleAva = post.avatar;
				getApp().globalData.currentArticleName = post.username;
				uni.navigateTo({
					url: `/pages/forum/convercition?id=${post.id}`
				})
			},
			goExpert(expert) {
				getApp().globalData.currentDoctorId = expert.id;
				uni.navigateTo({
					url: `/pages/forum/expert?id=${expert.id}`
				})
			},
			goShop() {
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goHealth() {
				uni.switchTab({
					url: '/pages/health/health'
				})
			},
			goMine() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			}
		}
	}
</script>

<style scoped>
	.pet-forum-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	.web-content-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}

	/* 悬浮发布按钮样式 */
	.floating-publish-btn {
		position: fixed;
		right: 30px;
		bottom: 80px;
		width: 60px;
		height: 60px;
		background-color: #F9CB43;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4px 12px rgba(249, 203, 67, 0.4);
		z-index: 999;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.floating-publish-btn:hover {
		transform: translateY(-5px);
		box-shadow: 0 6px 15px rgba(249, 203, 67, 0.5);
	}

	.plus-icon {
		font-size: 26px;
		font-weight: bold;
		color: white;
		line-height: 1;
		margin-bottom: 2px;
	}

	.publish-text {
		font-size: 12px;
		color: white;
		line-height: 1;
	}

	.top-navbar {
		background-color: white;
		padding: 15px 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo image {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.logo .titleText {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
	}

	.navbar-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-categories {
		display: flex;
	}

	.nav-item {
		padding: 8px 15px;
		color: #000000;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		margin-right: 10px;
		border-radius: 5px;
		transition: all 0.3s;
	}

	.nav-item:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		max-width: 300px;
	}

	.search-container image {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 15px;
		padding: 5px 5px;
		background-color: transparent;
	}

	.search-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 0 50px 50px 0;
		padding: 5px 15px;
		font-size: 14px;
		cursor: pointer;
	}

	.user-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
		cursor: pointer;
	}

	.action-item image {
		width: 24px;
		height: 24px;
	}

	.action-item .titleText {
		margin-top: 5px;
		color: #000000;
		font-size: 14px;
	}

	.title-text {
		font-size: 24px;
		font-weight: 600;
		position: relative;
		padding-left: 15px;
		color: #333;
	}

	.title-text::before {
		content: '';
		position: absolute;
		left: 0;
		top: 6px;
		height: 22px;
		width: 5px;
		background-color: #F9CB43;
		border-radius: 3px;
	}

	.section-title {
		margin: 30px 0 20px;
	}

	/* 专家部分 */
	.expert-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 20px;
		margin-bottom: 40px;
	}

	.expert-card {
		background-color: white;
		border-radius: 10px;
		padding: 20px;
		text-align: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		cursor: pointer;
	}

	.expert-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
	}

	.expert-avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		object-fit: cover;
		margin-bottom: 10px;
		border: 3px solid #f0f0f0;
	}

	.expert-name {
		display: block;
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 5px;
	}

	.expert-title {
		display: block;
		font-size: 14px;
		color: #666;
	}

	/* 帖子部分 */
	.posts-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
		gap: 20px;
	}

	.post-card {
		background-color: white;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: box-shadow 0.3s ease;
	}

	.post-card:hover {
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}

	.post-header {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.user-avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 15px;
		object-fit: cover;
	}

	.username {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	/* 修改帖子内容样式，添加两行限制和省略号 */
	.post-content {
		font-size: 16px;
		line-height: 1.6;
		margin-bottom: 15px;
		color: #333;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.post-image-container {
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 15px;
	}

	.post-image {
		width: 100%;
		height: 250px;
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	.post-image:hover {
		transform: scale(1.02);
	}

	.post-interactions {
		display: flex;
		gap: 20px;
		color: #666;
	}

	.interaction-item {
		display: flex;
		align-items: center;
		cursor: pointer;
		transition: color 0.2s ease;
	}

	.interaction-item:hover {
		color: #F9CB43;
	}

	.interaction-icon {
		margin-right: 8px;
		font-size: 18px;
	}

	.interaction-count {
		font-size: 16px;
	}

	/* 页脚样式 */
	.footer {
		background-color: #131917;
		color: #fff;
		padding: 50px 0 20px;
	}

	.footer-section {
		margin-bottom: 30px;
	}

	.footer-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
		display: block;
		position: relative;
		padding-bottom: 10px;
	}

	.footer-title::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 50px;
		height: 2px;
		background-color: #F9CB43;
	}

	.footer-link {
		display: block;
		margin-bottom: 10px;
		color: #bbb;
		transition: all 0.3s;
		cursor: pointer;
	}

	.footer-link:hover {
		color: #F9CB43;
		padding-left: 5px;
	}

	.social-links {
		display: flex;
		margin-bottom: 15px;
	}

	.social-icon {
		font-size: 24px;
		margin-right: 20px;
		color: #bbb;
		transition: all 0.3s;
		cursor: pointer;
	}

	.social-icon:hover {
		color: #F9CB43;
		transform: scale(1.2);
	}

	.footer-contact {
		color: #bbb;
		font-size: 14px;
	}

	.copyright {
		text-align: center;
		margin-top: 30px;
		padding-top: 20px;
		border-top: 1px solid #444;
		color: #bbb;
		font-size: 14px;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.web-content-container {
			padding: 15px;
		}

		.posts-container {
			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		}

		.expert-grid {
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		}
	}

	@media (max-width: 480px) {
		.posts-container {
			grid-template-columns: 1fr;
		}
	}
</style>